import React from 'react'
import * as echarts from 'echarts';
import "./index.css"
import { getStatisticDataApi } from '../../apis/users';
import { Link } from 'react-router-dom';
//获取最近七天的日期
function getRecentlySevenDays() {
  const now = Date.now();//现在时刻的时间戳
  const dayMillionseconds = 24 * 60 * 60 * 1000;//每天的毫秒数
  const res = [];//最近七天的日期
  for (let i = 0; i < 7; i++) {
    const d = new Date(now - dayMillionseconds * i);
    const mon = d.getMonth() + 1;//获取月份
    const date = d.getDate();//获取号数
    res.unshift(`${mon}-${date}`);
  }

  return res;
}
export default function Home() {
  const [visit,setVisit] = React.useState({})
  React.useEffect(()=>{
    const myEcharts = echarts.init(document.getElementById('myEcharts'));
    const xData = getRecentlySevenDays();
    const user = JSON.parse(localStorage.user); 
    getStatisticDataApi(user.username)
    .then(res=>{
      console.log(res);
      setVisit(res.data)
      const lastSevenVisitCount = res.data.lastSevenVisitCount;
      const yData = [];
      lastSevenVisitCount.forEach(item=>yData.push(item.count))
      let len = yData.length;
      while (len<7) {
        yData.unshift(0);
        len = yData.length;
      }
      const lastSevenUserVisitCount = res.data.lastSevenUserVisitCount;
      const yData2 = [];
      lastSevenUserVisitCount.forEach(item=>yData2.push(item.count))
      let len1 = yData2.length;
      while (len1<7) {
        yData2.unshift(0);
        len1 = yData2.length;
      }
      myEcharts.setOption({
        title:{
          text:"七天访问记录"
        },
        tooltip:{},
        xAxis:{
          data: xData
        },
        yAxis:{},
        series:[
          {
            name:"访问量",
            type:"bar",
            data: yData,
          },
          {
            name:"访问量2",
            type:"bar",
            data: yData2,
          }
        ]
      });
    })

    
  },[])
  const user = JSON.parse(localStorage.user)
  return (
    <div>
      <div className='top'>
          <img style={{width:"80px",height:"80px"}} src={"http://xawn.f3322.net:8002/distremote/static/avatar/"+user.avatar} alt="" />
          <div style={{flexGrow:1,marginLeft:"18px"}}>
            <p>上午好，{user.username}，要不要和朋友打局LOL</p>
            <p className='hs'>{user.deptName} | {user.roleName}</p>
            <p className='hs'>上次登录时间：{user.lastLoginTime}</p>
          </div>
          <div style={{display:'flex'}}>
          <div>
            <p style={{color:'#949494'}}>今日IP</p>
            <p style={{color:'#1890ff',marginTop:"30px"}}>{visit.todayIp}</p>
          </div>
          <div style={{margin:'0 30px'}}>
            <p style={{color:'#949494'}}>今日访问</p>
            <p style={{color:'#1890ff',marginTop:"30px"}}>{visit.todayVisitCount}</p>
          </div>
          <div>
            <p style={{color:'#949494'}}>总访问量</p>
            <p style={{color:'#1890ff',marginTop:"30px"}}>{visit.totalVisitCount}</p>
          </div>
        </div>
      </div>
      <div className="content">
        <div className="left" id="myEcharts"></div>
        <div className="right">
        <div className='home-program'>
          <div className='f-sb-c' style={{ padding: '20px 24px',border: '1px solid #F1F1F1',display:"flex",justifyContent:"space-between"}}>
            <h4>进行中的项目</h4>
            <Link>所有项目</Link>
          </div>
          <div>
            <table style={{border:'1px solid #F1F1F1'}}>
              <tbody>
              <tr>
                <td>
                  <span>F</span>
                  <div>
                    <h5>RedRabbit-Shiro</h5>
                    <p>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</p>
                  </div>
                </td>
                <td>
                  <span>F</span>
                  <div>
                    <h5>RedRabbit-Security</h5>
                    <p>Spring Boot 2.0.4 & Spring Security 5.0.7 权限管理系统。</p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <span>F</span>
                  <div>
                  <h5>SpringAll</h5>
                    <p>循序渐进学习Spring Boot、Spring Cloud与Spring Security。</p>
                  </div>
                </td>
                <td>
                  <span>F</span>
                  <div>
                    <h5>RedRabbit-Shiro-Vue</h5>
                    <p>RedRabbit-Shiro前后端分离版本，前端架构采用Vue全家桶。</p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <span>F</span>
                  <div>
                    <h5>RedRabbit-Actuator</h5>
                    <p>使用Spring Boot Admin 2.0.2构建，用于监控RedRabbit。</p>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>

        </div>
        </div>
      </div>
    </div>
  )
}

